/* stylelint-disable at-rule-no-unknown */
@import './reset.scss';
html,
body {
  width: 100%;
  height: 100%;
}
#container {
  width: 100%;
  height: 100%;
}
#stencil {
  position: relative;
  width: 280px;
  height: 100%;
  border-right: 1px solid #f0f0f0;
}
.wrap {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  padding: 0 24px;
  border-bottom: 1px solid #f0f0f0;
}
.content {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.sider {
  width: 280px;
  border-right: 1px solid #f0f0f0;
}
.panel {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.toolbar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 24px;
  border-bottom: 1px solid #f0f0f0;
}
.x6-graph {
  flex: 1;
}
.config {
  width: 320px;
  border-left: 1px solid #f0f0f0;
}
.config .result {
  padding-right: 8px;
  text-align: right;
}
.x6-widget-snapline-vertical {
  border-right-color: #ff4e50 !important;
}
.x6-widget-snapline-horizontal {
  border-bottom-color: #ff4e50 !important;
}
.x6-widget-selection-box {
  margin-top: -3px;
  margin-left: -3px;
  border: 1px dashed #5f95ff;
}
.x6-widget-selection-inner {
  border: 1px dashed #5f95ff;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}
.animate-text1,
.animate-text2,
.animate-text3,
.animate-text4 {
  font-weight: bold;
  fill: none;
  stroke-dasharray: 90 310;
  stroke-width: 2px;
  animation: stroke 3s infinite linear;
}
.animate-text1 {
  text-shadow: 0 0 2px #873bf4;
  stroke: #873bf4;
  animation-delay: -1.5s;
}
.animate-text2 {
  text-shadow: 0 0 2px #ff6e06;
  stroke: #ff6e06;
  animation-delay: -3s;
}